<template>
	<div class="flex box">
		<div class="box-content" v-for="(item, index) in props.list" :key="index" :style="{ width: item.width }">
			<div class="flex box-item" v-if="item.type === 1">
				<div class="content-item flex-1" v-for="(i, j) in item.list" :key="j">
					<div class="flex rowSC">
						<img class="flex-none img" :src="i.url" />
						<div>
							<p class="name">{{ i.name }}</p>
							<p class="tips">{{ i.tips }}</p>
						</div>
					</div>
					<div class="number">
						<div class="icon" v-if="i.icon">
							<img class="icon-img" :src="i.icon" />
							<div class="icon-num">
								{{ i.num }}
								<span>{{ i.unit }}</span>
							</div>
						</div>
						<div v-else class="number-m">
							<div  v-if="i.num">
								<count-to :start='0' :end='i.num.value' :duration='5000' />
								<span>{{ i.num.unit + i.unit }}</span>
							</div>
							<div class="value" v-else>{{ i.value }}</div>
						</div>
					</div>
				</div>
			</div>
			<div v-else class="flex box-item" :class="item.type === 2 ? 'textItem' : ''">
				<div class="number text-center flex-1" v-for="(i, j) in item.list" :key="j">
					{{ i.num.value }}<span>{{ i.num.unit + i.unit }}</span>
					<div class="name">{{ i.name }}</div>
				</div>
			</div>
			<img v-if="item.type === 1" class="flex-none bgImg" :src="bgImg.hxbg" />
			<img v-if="item.type === 1" class="flex-none sxbg" :src="bgImg.sxbg" />
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		onMounted,
	} from 'vue';

	const props: any = defineProps({
		list: Array
	})
	const bgImg = {
		hxbg: new URL('@/assets/index/grid/hxbg.png',
			import.meta.url).href,
		sxbg: new URL('@/assets/index/grid/sxbg.png',
			import.meta.url).href
	}
</script>

<style lang="scss" scoped>
	.content-item {
		width: 300px;
		padding-left: 60px;
	}

	.flex {
		display: flex;
		flex-flow: wrap;
	}

	.rowSC {
		align-items: center;
	}

	.flex-none {
		flex: none;
	}

	.flex-1 {
		flex: 1;
	}

	.box {
		justify-content: space-between;
		padding: 30px 20px;
		
		&-content {
			position: relative;
		}
		
		&-item {
			padding: 30px 0;
			// min-height: 225px;
			// height: 75%;
		}

		.bgImg {
			position: absolute;
			bottom: 0;
			left: 10%;
			width: 543.69px;
		}

		.sxbg {
			position: absolute;
			bottom: 10%;
			left: 50%;
			height: 164.33px;
		}
	}

	.name {
		font-size: 28px;
		margin: 0;
		font-weight: normal;
		font-style: normal;
	}

	.img {
		width: 56px;
		height: 100%;
		margin-right: 10px;
	}

	.tips {
		font-size: 10px;
		color: #9a9a9a;
		letter-spacing: 2px;
		margin: 0;
	}

	.text-center {
		text-align: center;
	}

	.number {
		font-size: 60px;
		font-weight: 700;
		// text-shadow: 0 0 6px #F2994A;
		animation: slowShining 3s infinite alternate;
		
		span {
			font-size: 30px;
			font-weight: 500;
		}

		&-m {
			margin: 40px 0 0 10px;
			text-shadow: 0 0 6px #159AFF;
			text-align: left;
			.value {
				font-size: 36px;
			}
		}

		.icon {
			position: relative;

			&-img {
				position: absolute;
				top: 22px;
				left: 44px;
			}

			&-num {
				position: absolute;
				top: 15px;
				font-size: 34px;
				left: 77px;

				span {
					font-size: 20px;
					font-weight: 300;
				}
			}
		}
	}
	
	@keyframes slowShining {
	    0%{
	      text-shadow:
	          0 0 2px #fff,
	          0 0 4px #fff,
	          0 0 6px #F2994A,
	          0 0 10px #F2994A,
			  0 0 15px #F2994A;
	    }
	    100% {
	      text-shadow: none
	    }
	}
</style>
